<!-- eslint-disable vue/no-mutating-props -->
<template>
  <div>
    <h1 class="title">创建新的迁移任务</h1>
    <el-form ref="form" :model="data" :rules="rules">
      <el-row :gutter="20">
        <el-col
          v-for="item in formElData"
          :key="item.dataName"
          :span="item.span"
        >
          <el-form-item
            v-if="item.dataName == 'jobMode'"
            :label="item.label || ''"
            :prop="item.dataName"
            :label-width="item.labelWidth"
            :style="{ width: item.width || '100%' }"
          >
            <el-radio-group v-model="data[item.dataName]">
              <el-radio
                v-for="(dict, index) in computedModeList"
                :key="dict.value + index"
                :border="item.border"
                :label="dict.value"
                :disabled="dict.disabled"
              >{{ dict.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <formItemVue v-else :data="item" :form="data" />
          <el-col v-if="item.inlineEl && item.inlineEl.length > 0" :span="1">
            <i
              class="el-icon-right"
            /></el-col>
          <template v-if="item.inlineEl && item.inlineEl.length > 0">
            <formItemVue
              v-for="items in item.inlineEl"
              :key="items.dataName"
              :data="items"
              :form="data"
            />
          </template>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import Vue from 'vue'
import { stepOneData } from './index'
import formItemVue from '@/components/FormItem/index.vue'

export default {
  name: 'TaskDataSync',
  components: { formItemVue },
  // eslint-disable-next-line vue/require-prop-types
  props: ['data'],
  data: function() {
    return {
      rules: {},
      jobModeList: []
    }
  },
  computed: {
    computedModeList() {
      const arr = this.jobModeList
      const v = this.$props.data.jobType
      if (!v || !Array.isArray(v)) {
        return arr
      }
      arr.forEach((f) => {
        delete f.disabled
        f.disabled =
          v[1] === 'SYNC_DATA' ? f.value === 'ONCE' : f.value !== 'ONCE'
      })
      if (
        (v[1] === 'SYNC_DATA' && this.$props.data.jobMode === 'ONCE') ||
        (v[1] !== 'SYNC_DATA' && this.$props.data.jobMode !== 'ONCE')
      ) {
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.$props.data.jobMode = ''
      }
      return arr
    }
  },
  // watch: {
  //   'data.jobType'(v) {
  //     const that = this
  //     v = v[1]

  //     if (v === 'SYNC_STRUCTURE') {
  //       if (this.formElData.find(f => f.dataName === 'aiModel')) {
  //         return
  //       }
  //       this.formElData.splice(3, 0, {
  //         label: 'AI源',
  //         dataName: 'aiModel',
  //         component: 'select',
  //         span: 20,
  //         labelWidth: '100px',
  //         async option() {
  //           const arr = []
  //           const res = await getAiList()
  //           Object.keys(that.sort(res)).forEach((f) => {
  //             arr.push({
  //               label: `${res[f]}(${f})`,
  //               value: f
  //             })
  //           })
  //           return arr
  //         }
  //       })
  //     } else {
  //       this.formElData.forEach((f, i) => {
  //         if (f.dataName === 'aiModel') {
  //           this.formElData.splice(i, 1)
  //         }
  //       })
  //     }
  //   }
  // },
  created() {
    this.formElData = stepOneData
    this.getRules()
  },
  mounted() {
    this.getJobmode()
  },
  methods: {
    sort(data) {
      const sortedData = Object.entries(data).sort((a, b) => {
        const [, valueA] = a
        const [, valueB] = b
        return valueA.split('-')[0].localeCompare(valueB.split('-')[0])
      })
      const result = Object.fromEntries(sortedData)
      return result
    },
    async getJobmode() {
      const { data } = await this.getDicts('synchronous_jobmode')
      data.forEach((f) => {
        this.jobModeList.push({
          value: f.dictValue,
          label: f.dictLabel
        })
      })
    },
    getRules() {
      const that = this
      if (!this.formElData) {
        return
      }
      this.formElData.forEach((f) => {
        if (!that.$props.data[f.dataName]) {
          Vue.set(that.$props.data, f.dataName, f.defaultValue || '')
        }
        this.rules[f.dataName] = f.rules
          ? f.rules
          : [
            {
              required: true,
              message: `请输入${f.label}`,
              trigger: 'change'
            }
          ]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  color: #333;
  font-size: 22px;
  line-height: 1.25;
  font-family: alimama, webfont-notdef;
  font-size: 18px;
  box-sizing: border-box;
  padding-left: 20px;
  font-weight: 600;
  text-align: left;
}

::v-deep .el-col {
  display: flex;
  align-items: center;
}

::v-deep .el-form-item {
  margin-bottom: 0 !important;
  padding: 10px 0;
}

::v-deep .el-form-item__label {
  font-family: alimama, webfont-notdef;
  color: #333;
}
</style>
